<template>

    <a-layout>
        <a-layout-content class="dicManageRoot">
            <PageHeader>

                <a-button type="primary" @click="addVisible=true">添加字典</a-button>

            </PageHeader>

            <div style="flex:1;display: flex;justify-content: space-between">
                <div style="width:45%;height: 100%;display: flex;flex-direction: column" ref="dictTableWrapper">

                    <a-table style="flex:1"
                             :rowSelection="{onChange: onDictClick,type:'radio'}"
                             :scroll="{ y : (this.$refs.dictTableWrapper ? this.$refs.dictTableWrapper.offsetHeight - 120:0  ) }"
                             rowKey="dictId"
                             :columns="columns" :dataSource="table.records"
                             :pagination="false">



                        <span slot="dictId" slot-scope="text, record" class="oper">

                    <a-icon type="edit" title="编辑" theme="twoTone" v-has-permission="'dict:edit'"
                            @click="()=>{curDictId=text;editVisible=true}"/>

                    <a-icon type="plus" title="添加字典项" v-has-permission="'dict:addItem'"
                            @click="()=>{curDictId=text;addItemVisible=true}"/>



                    <a-popconfirm title="确认删除此字典吗" v-has-permission="'dict:delete'" @confirm="deleteDict(text)"
                                  okText="确认" cancelText="取消">
                        <a-icon type="delete" theme="twoTone" twoToneColor="#f50" title="删除"/>
                    </a-popconfirm>
                </span>

                    </a-table>
                    <a-pagination v-model="table.current" :total="table.total" :pageSize="table.size"
                                  @change="loadDicts"/>
                </div>


                <!-------------------------------------------分割线------------------------------------------------>

                <div style="width:45%;height: 100%;display: flex;flex-direction: column" ref="itemTableWrapper">

                    <a-table :dataSource="dictItemTableData" :columns="dictItemTableColumns"

                             :scroll="{ y : (this.$refs.itemTableWrapper ? this.$refs.itemTableWrapper.offsetHeight - 120:0  ) }"
                             rowKey="itemId"
                    >

                        <span slot="dictItemId" slot-scope="text, record" class="oper">

                    <a-icon type="edit" title="编辑" theme="twoTone" v-has-permission="'dict:editItem'"
                            @click="()=>{curDictItemId=text;editItemVisible=true}"/>


                    <a-popconfirm title="确认删除此字典项吗" v-has-permission="'dict:deleteItem'" @confirm="deleteDictItem(text)"
                                  okText="确认" cancelText="取消">
                        <a-icon type="delete" theme="twoTone" twoToneColor="#f50" title="删除"/>
                    </a-popconfirm>
                </span>
                    </a-table>

                </div>
            </div>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="添加字典"
                    @close="addVisible=false"
                    :visible="addVisible"
            >

                <DictAdd @ok="loadDicts();addVisible=false" ref="addDict"></DictAdd>


                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.addDict.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="编辑字典"
                    @close="editVisible=false"
                    :visible="editVisible">

                <DictEdit ref="editDict" v-model="curDictId" @ok="editVisible=false;loadDicts()"></DictEdit>

                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.editDict.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>

            <!---------------------------分隔符-------------------------->

            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="添加字典项"
                    @close="addItemVisible=false"
                    :visible="addItemVisible"
            >

                <DictItemAdd v-model="curDictId" @ok="loadDictItemList();addItemVisible=false" ref="addDictItem"></DictItemAdd>


                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.addDictItem.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


            <a-drawer
                    width="350"
                    :destroyOnClose="true"
                    :maskClosable="true"
                    placement="right"
                    title="编辑字典项"
                    @close="editItemVisible=false"
                    :visible="editItemVisible">

                <DictItemEdit ref="editDictItem" v-model="curDictItemId"
                              @ok="editItemVisible=false;loadDictItemList()"></DictItemEdit>

                <div class="drawerBottomWrapper">
                    <a-button @click="()=>{this.$refs.editDictItem.submitData()}" type="primary">
                        提交
                    </a-button>
                </div>
            </a-drawer>


        </a-layout-content>

    </a-layout>
</template>

<script>

    import {Layout, Table, Pagination, message, Icon, Popconfirm, Button, Drawer} from 'ant-design-vue';

    import DictAdd from './DictAdd';
    import DictEdit from './DictEdit';

    import DictItemAdd from './DictItemAdd';
    import DictItemEdit from './DictItemEdit';

    export default {
        name: "DictManage",
        components: {
            DictItemAdd,
            DictItemEdit,
            DictAdd,
            DictEdit,
            ADrawer: Drawer,
            AButton: Button,
            ALayout: Layout,
            ALayoutContent: Layout.Content,
            ATable: Table,
            APagination: Pagination,
            AIcon: Icon,
            APopconfirm: Popconfirm
        },
        data() {
            return {
                addVisible: false,
                editVisible: false,
                curDictId: '',
                addItemVisible: false,
                editItemVisible: false,
                curDictItemId: '',
                dictItemTableData: [],
                dictItemTableColumns: [
                    {
                        title: 'key',
                        dataIndex: 'itemKey',
                        width: '20%'
                    },
                    {
                        title: '名称',
                        dataIndex: 'itemName',
                        width: '20%'
                    },
                    {
                        title: '操作',
                        width: '20%',
                        dataIndex: 'itemId',
                        scopedSlots: {customRender: 'dictItemId'}
                    }
                ],
                table: {
                    current: 1,
                    size: 10,
                    total: 0,
                    records: []
                },

                columns: [{
                    title: '字典标识',
                    dataIndex: 'dictIdent',
                    width: '30%'
                },
                    {
                        title: '字典名称',
                        dataIndex: 'dictName',
                        width: '30%'
                    },
                    {
                        title: '操作',
                        width: '20%',
                        dataIndex: 'dictId',
                        scopedSlots: {customRender: 'dictId'}
                    }
                ]

            }
        },
        mounted() {

            this.loadDicts();
        },
        methods: {


            deleteDict(dictId){

                this.$axios.delete("/auth/dict/deleteDict?dictId=" + dictId)
                    .then(d=>{

                        if(d.data.status == 0){
                            message.success(d.data.message);
                            this.loadDicts();
                        }else{
                            message.error(d.data.message);
                        }

                    },e=>{
                        message.error(e.message);
                    });
            },
            deleteDictItem(itemId){

                this.$axios.delete("/auth/dict/deleteDictItem?itemId=" + itemId)
                    .then(d=>{
                        if(d.data.status == 0){
                            message.success(d.data.message);
                            this.loadDictItemList();
                        }else{
                            message.error(d.data.message);
                        }
                    },e=>{
                        message.error(e.message);
                    });
            },

            loadDicts(page = "1") {

                let params = new URLSearchParams();
                params.append("current", page);
                params.append("size", this.table.size);

                this.$axios.get("/auth/dict/getDictList?" + params.toString())
                    .then(d => {

                        if (d.data.status == 0) {

                            let pageData = d.data.data;
                            this.table = pageData;

                            if(this.table.records.length > 0){

                                this.curDictId = this.table.records[0].dictId;
                                this.loadDictItemList();
                            }

                        }

                    }, e => {

                        message.error("字典数据加载失败");
                    })

            },
            onDictClick(selectedRowKeys, selectedRows) {

                let dictId = selectedRows[0].dictId;

                this.curDictId = dictId;

                this.loadDictItemList();
            },

            loadDictItemList(){

                this.$axios.get("/auth/dict/getDictItemList?dictId=" + this.curDictId)
                    .then(d => {

                        if (d.data.status == 0) {

                            this.dictItemTableData = d.data.data
                        }

                    }, e => {

                        message.error("字典数据加载失败");
                    })
            }
        }

    }
</script>

<style scoped>

    .dicManageRoot {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    >>> .ant-table-header {
        margin-bottom: 0px !important;
        padding-bottom: 0px !important;
        overflow: hidden !important;
    }

    >>> .ant-table-body {
        overflow-y: auto !important;
    }

    >>> .ant-pagination {
        display: flex;
        justify-content: flex-end;
    }

    .oper >>> .anticon {

        margin-right: 16px;
        font-size: 20px;
        cursor: pointer;
    }


</style>